<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
              <a-input :disabled="formDisabled" v-model="model.projectName" :max-length="36" placeholder="请输入项目名称" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发布内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishContent">
              <j-editor :disabled="formDisabled" v-model="model.publishContent" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发布时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishDate">
              <j-date :disabled="formDisabled" placeholder="请选择发布时间" v-model="model.publishDate" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishAddress">
              <a-input :disabled="formDisabled" v-model="model.publishAddress" :max-length="36" placeholder="请输入地址" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发布应用类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applicationType">
              <j-multi-select-tag :disabled="formDisabled" type="checkbox" v-model="model.applicationType" dictCode="application_type" placeholder="请选择发布应用类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="后台应用名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="applicationName">
              <a-input :disabled="formDisabled" v-model="model.applicationName" :max-length="36" placeholder="请输入应用名称" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发布方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishWay">
              <j-multi-select-tag :disabled="formDisabled" type="checkbox" v-model="model.publishWay" dictCode="publish_way" placeholder="请选择发布方式" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="nginx配置说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nginxConfig">
              <j-upload :disabled="formDisabled" v-model="model.nginxConfig" ></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="网关配置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gatewayConfig">
              <j-upload :disabled="formDisabled" v-model="model.gatewayConfig" ></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="数据库脚本" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dbScirpt">
              <j-upload :disabled="formDisabled" v-model="model.dbScirpt" ></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发布执行人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishExecuter">
              <a-input :disabled="formDisabled" v-model="model.publishExecuter" :max-length="36" placeholder="请输入发布执行人" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="技术负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="technologyDirector">
              <a-input :disabled="formDisabled" v-model="model.technologyDirector" :max-length="36" placeholder="请输入技术负责人" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="测试工程师" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="testEngineer">
              <a-input :disabled="formDisabled" v-model="model.testEngineer" :max-length="36" placeholder="请输入测试工程师" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="总工办" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chiefEngineer">
              <a-input :disabled="formDisabled" v-model="model.chiefEngineer" :max-length="36" placeholder="请输入总工办" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea :disabled="formDisabled" v-model="model.remark" rows="4" :max-length="500" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
          <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
            <a-button @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
  import { mapGetters } from 'vuex'
  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import { watch } from 'vue'

  export default {
    name: 'ErpProductionDeployForm',
    components: {
      SelectUserByDep,
      SelectTeamInput,
      SelectCompanyInput,
      SelectCustomerInput,
      JMultiSelectTag
    },
    props: {
      // 流程表单data
      formData: {
        type: Object,
        default: () => {},
        required: false
      },
      // 表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {},
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
          applicationName: [{ required: false, message: '请输入应用名称', trigger: 'blur' }],
          applicationType: [{ required: true, message: '请选择发布应用类型', trigger: 'change' }],
        },
        url: {
          add: '/api/erp/deploy/erpProductionDeploy/add',
          edit: '/api/erp/deploy/erpProductionDeploy/edit',
          queryById: '/api/erp/deploy/erpProductionDeploy/queryById'
        }
      }
    },
    watch: {
      // 判断发布应用类型是否选择了后台管理系统或者其他选项，选择，则必填applicationName没有选择则不必填
      'model.applicationType': {
        handler: function (val) {
          // 判断val字段是否包含了system或者包含了other字段
          if (val && (val.includes('system') || val.includes('other'))) {
            this.validatorRules.applicationName[0].required = true
          } else {
            this.validatorRules.applicationName[0].required = false
          }
        },
        immediate: true
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      // 如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      ...mapGetters(['userInfo']),
      add () {
        this.edit(this.modelDefault)
      },
      edit (record) {
        this.$refs.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true
      },
      // 渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = { id: this.formData.dataId }
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result)
            }
          });
        }
      },
      submitForm () {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
                that.$emit('unButtonDisable');
              }
            }).catch(() => {
              that.$emit('unButtonDisable');
            }).finally(() => {
              that.confirmLoading = false;
            })
          } else {
            that.$emit('unButtonDisable');
          }
        })
      }
    }
  }
</script>
